<template>
  <el-card shadow="never">
    <div slot="header" ref="topHeader" class="sysUserSearchHeader">
      <el-form :inline="true" :model="listQuery" class="demo-form-inline">
        <el-form-item style="margin-bottom: 5px;" label="账号:">
          <el-input style="width: 160px" v-model="listQuery.name" placeholder="账号" clearable/>
        </el-form-item>
        <el-form-item style="margin-bottom: 5px;" label="状态:">
          <el-select v-model="listQuery.status" style="width: 120px" placeholder="状态" clearable>
            <el-option label="启用" :value="true"/>
            <el-option label="已禁用" :value="false"/>
          </el-select>
        </el-form-item>
      </el-form>
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item>
          <el-button type="primary" icon="el-icon-circle-plus" @click="editMaxNum()">修改领取</el-button>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-circle-plus" @click="addEdit(null)">增加</el-button>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <!--table data-->
      <el-table
          ref="tableCot"
          v-loading="loading"
          element-loading-text=""
          :data="tableData" border style="width: 100%"
          :max-height="customTableHeight"
          @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="40"/>
        <el-table-column prop="name" label="账号" min-width="120" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
            <i v-clipboard:copy='getCopyData(scope.row.name)' v-clipboard:success='clipboardSuccess'
               style="cursor: pointer;margin-left: 2px;position: absolute;right: 5px;top: 15px"
               title="复制账号" class="el-icon-copy-document"/>
          </template>
        </el-table-column>
        <el-table-column prop="nick" label="昵称" min-width="120" />
        <el-table-column prop="role_name" label="角色" min-width="80" />
        <el-table-column prop="created_at" label="创建时间" min-width="140" />
        <el-table-column prop="num" label="今日已领" min-width="80" />
        <el-table-column prop="max_num" label="最大领取" min-width="80" />
        <el-table-column label="状态" min-width="100">
          <template slot-scope="scope">
            <el-tooltip :content="scope.row.status == 1 ? '已启用' : '已禁用'" placement="top">
              <el-switch
                  v-model="scope.row.status"
                  :active-value="1"
                  :inactive-value="0"
                  @change="switchChange(scope.row)"
              />
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="125">
          <template slot-scope="scope">
            <el-tag style="cursor:pointer;margin-right: 4px;" size="mini" @click="addEdit(scope.row)">
              <i class="el-icon-edit"/>编辑
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
      <!--分頁-->
      <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.pageSize" @pagination="getList"/>
      <!--添加/编辑-->
      <user-edit
          :dialog-visible="addEditVisible"
          :data="addEditData"
          @close="closeDialog"
      />
    </div>
  </el-card>
</template>
<script>
import Pagination from '@/components/Pagination'
import userEdit from '@/views/user/edit'
import { getList, setStatus, setMaxNum }  from '@/api/user'
import permission from '@/directive/permission/index.js'
import clipboard from '@/directive/clipboard/index.js'

export default {
  name: 'tenant',
  components: {Pagination, userEdit},
  directives: {permission, clipboard},
  data() {
    return {
      loading: false,
      addEditVisible: false,
      operationType: 1,
      customTableHeight: 200,
      formInline: {
        user: '',
        region: ''
      },
      total: 0,
      listQuery: {
        page: 1,
        pageSize: 10,
        name: '',
        status: ''
      },
      tableData: [],
      addEditData: {},
      multipleSelection: [],
      batch_max_num: 0
    }
  },
  computed: {
    theme() {
      return this.$store.state.settings.theme
    }
  },
  mounted() {
    this.getList()
    let that = this
    window.onresize = () => {
      //37是box的header的padding，70=(60+10)是顶部的高度
      let tempHeaderHeight = this.$refs.topHeader.offsetHeight + 37 + 95
      let tempHeight = document.body.clientHeight - (106 + tempHeaderHeight)
      if (tempHeight < 300) {
        tempHeight = 300
      }
      that.customTableHeight = tempHeight
    }
    setTimeout(function () {
      const resizeEvent = new Event('resize')
      window.dispatchEvent(resizeEvent)
    }, 100)
  },
  destroyed() {
    window.onresize = null
  },
  methods: {
    search() {
      this.getList()
    },
    getList() {
      this.loading = true
      getList(this.listQuery.page, this.listQuery).then(res => {
        this.tableData = res.data.list || []
        this.total = res.data.total || 0
        this.loading = false
        this.listQuery.page = res.data.page || 1
      }).catch(() => this.loading = false)
    },
    switchChange(row) {
      setStatus({id: row.id, status: row.status === 1 ? 1 : 0}).then(res => {

      })
    },
    addEdit(row) {
      this.operationType = row ? 2 : 1
      if (row) {
        this.addEditData = JSON.parse(JSON.stringify(row))
      } else {
        this.addEditData = {
          id: 0,
          name: '',
          nick: '',
          role: 0,
          role_name: '',
          status: 0
        }
      }
      this.addEditVisible = true
    },
    closeDialog(state) {
      this.addEditVisible = false
      this.operationType = 1
      this.addEditData = {
        id: 0,
        name: '',
        nick: '',
        role: 0,
        role_name: '',
        status: 0
      }
      if (state === 1) {
        this.getList()
      }
    },
    getCopyData(content) {
      return content
    },
    clipboardSuccess() {
      this.$message.success('复制成功')
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    editMaxNum() {
      if (this.multipleSelection.length === 0) {
        this.$message.warning("请勾选下方的用户！")
        return;
      }
      let ids = [];
      this.multipleSelection.forEach(value => {
        ids.push(value.id)
      })
      this.$prompt('批量修改领取数', '', {
        confirmButtonText: '确认修改',
        cancelButtonText: '取消',
        inputValue: this.batch_max_num
      }).then(content => {
        setMaxNum({ids: ids, max_num: content.value}).then(res => {
          this.$message.success('修改成功')
          this.getList()
        })
      }).catch(() => {
      })
    }
  }
}
</script>
<style scoped lang="scss">

</style>
